<template>
  <div class="cas">
    <div>
      <el-row>
        <el-col :span="6">
          <div class="block date">
            <span>年份：</span>
            <el-date-picker v-model="years" type="year" placeholder="选择年">
            </el-date-picker>
          </div>
        </el-col>
        <el-col :span="6" class="date">
          <span>类别：</span>
          <el-select v-model="value" placeholder="选择类别">
            <el-option v-for="item in options"
            :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
    </div>
    <el-divider></el-divider>
    <div ref="echartsmain" id="myChart" class="beauty"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';

  export default {
    mounted() {
      this.echarts()
    },
    data() {
      return {
        years:"",
        options: [{
          value: '1',
          label: '水果'
        }, {
          value: '2',
          label: '家电'
        }],
        value: '',
        // 绘制图表
        option :{
          color: [//全局配色，不用修改
            '#c23531',
            '#2f4554',
            '#61a0a8',
            '#d48265',
            '#91c7ae',
            '#749f83',
            '#ca8622',
            '#bda29a',
            '#6e7074',
            '#546570',
            '#c4ccd3'
          ],
          title: {
            text: '出库报表'
          },//图标标题，修不修改都行
          tooltip: {},
          xAxis: { //x轴，目前基本代表时间轴了
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] //商品名
          },
          yAxis: {}, //y轴，不用改
          series: [{ //弹出消息提示，以及存放数量数据，name为图例名
              type: 'bar',
              data: [11, 20, 36, 10, 10, 20, 5, 20, 36, 10, 10, 20, 10, 20],
              barGap: '20%',
              barCategoryGap: '40%',//修改视图效果的，可以不动
              name: '上衣'
            },
            {
              type: 'bar',
              data: [12, 14, 9, 9, 11, 12, 14, 9, 9, 11, 9, 11],
              name: '裤子'
            },
            {
              type: 'bar',
              name: '皮鞋',
              data: [65, 60, 40, 55, 60, 50, 14, 9, 9, 11, 12, 50]
            }
          ],
          legend: {
            left: 'right'
          }
        }
      }
    },
    methods: {

      echarts() {
        let myChart = echarts.init(this.$refs.echartsmain);
        // 基于准备好的dom，初始化echarts实例
        window.onresize = function() {
          myChart.resize();
        };
        myChart.setOption(this.option);//运行option，加载节点，不用动
      }
    }
  }
</script>

<style>
  .cas {
    width: 100%;
    height: 100%;
  }

  .beauty {
    width: 80%;
    height: 80%;
    display: block;
    margin: 0 auto
  }

  .date {
    line-height: 20px;
    margin-top: 20px;
  }

  .date span {
    text-align: center;
  }
</style>
